<template>
	<view class="personal-info-page">
		<view class="up-view">
			<!-- <view class="custom-navbar"> -->
			<!-- 				<view class="nav-left" @click="goBack">
					<global-arrow direction="left" :size="29" color="#fff"></global-arrow>
				</view>
				<view class="nav-title">
					<text>信息修改</text>
				</view>
				</view> -->
			<!-- </view> -->
		</view>

		<view class="order-list-page">
			<!-- 顶部标签栏（背景蓝色，文字白色） -->
			<view class="tab-bar">
				<view v-for="(tab, index) in tabs" :key="index" class="tab-item"
					:class="{ active: currentTab === index }" @click="switchTab(index)">
					<text>{{ tab.name }}</text>
				</view>
			</view>

			<!-- 订单列表 -->
			<view class="order-list">
				<view v-for="(order, index) in orders" :key="index" class="order-item">
					<view class="cardUp" @click="goOrderDetail(order)">
						<!-- 订单编号 -->
						<view class="order-number">
							<text>订单编号: {{ order.orderNo }}</text>
							<global-arrow color="#aaaaaa" :size="20" direction="right"></global-arrow>
						</view>

						<!-- 服务信息 -->
						<view class="service-info">
							<text>服务项目： {{ order.serviceItem }}</text>
						</view>
						<view class="store-info">
							<text>服务门店： {{ order.storeName }}</text>
							<image src="/static/icons/myOrders/plane@2x.png" mode=""></image>
							<text class="status" :class="getStatusClass(order.status)">{{ order.status }}</text>
						</view>
						<view class="order-time">
							<text>下单时间： {{ order.orderTime }}</text>
						</view>

						<!-- 价格与操作按钮 -->
						<view class="price-operation">
							<view class="">
								<text>{{ order.priceType }}：</text>
								<text class="price" :class="getStatusClassPrice(order.status)">{{ order.price }}元</text>
							</view>

							<view class="btn-group">
							  <button v-if="order.status === '待评价'" class="btn evaluate-btn"
							    @click.stop="goEvaluate(order)">立即评价</button>
							  <button v-if="order.status === '待支付'" class="btn evaluate-btn"
							    @click.stop="cancelOrder(order)">取消订单</button>
							  <button v-if="order.status === '待使用'" class="btn evaluate-btn"
							    @click.stop="applyRefund(order)">申请退款</button>
							  <button
							    v-if="order.status === '待评价' || order.status === '已退款' || order.status === '已完成'"
							    class="btn repeat-btn" @click.stop="repeatOrder(order)">再来一单</button>
							  <button v-if="order.status === '待支付'" class="btn repeat-btn"
							    @click.stop="payOrder(order)">立即支付</button>
							  <button v-if="order.status === '待使用'" class="btn repeat-btn"
							    @click.stop="scanCheckout(order)">扫码结算</button>
							  <button v-if="order.status === '已取消'" class="btn reorder-btn"
							    @click.stop="reorder(order)">重新下单</button>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="foot">
				<!-- 分页加载提示 -->
				<view class="loading" v-if="isLoading">加载中...</view>
				<view class="no-more" v-if="!isLoading && orders.length === 0">暂无数据</view>
			</view>
		</view>


	</view>
</template>
<script>
	export default {
		data() {
			return {
				tabs: [{
						name: '全部',
						status: ''
					},
					{
						name: '待支付',
						status: '待支付'
					},
					{
						name: '待使用',
						status: '待使用'
					},
					{
						name: '待评价',
						status: '待评价'
					}
				],
				currentTab: 0, // 当前选中的标签索引
				orders: [], // 订单列表数据
				pageNum: 1, // 当前页码
				pageSize: 10, // 每页条数
				isLoading: false, // 是否正在加载
				hasMore: true // 是否还有更多数据
			};
		},
		onLoad() {
			this.getOrders();
		},
		methods: {
			goBack() {
				uni.navigateBack();
			},
			// 切换标签
			switchTab(index) {
				this.currentTab = index;
				this.pageNum = 1;
				this.orders = [];
				this.hasMore = true;
				this.getOrders();
			},
			// 获取订单数据（模拟接口请求）
			getOrders() {
				if (!this.hasMore || this.isLoading) return;

				this.isLoading = true;

				// 模拟接口请求，实际项目中替换为真实接口调用
				setTimeout(() => {
					const status = this.tabs[this.currentTab].status;
					let mockOrders = [];

					// 根据不同标签模拟不同数据
					if (status === '') {
						// 全部
						mockOrders = [{
								orderNo: '242552525222',
								serviceItem: '车辆保养',
								storeName: '大宝车辆维修店',
								orderTime: '2023-03-12 12:09',
								priceType: '实付',
								price: '230.56',
								status: '待评价'
							},
							{
								orderNo: '242552525222',
								serviceItem: '车辆保养',
								storeName: '大宝车辆维修店',
								orderTime: '2023-03-12 12:09',
								priceType: '应付',
								price: '230.56',
								status: '已取消'
							},
							{
								orderNo: '242552525222',
								serviceItem: '车辆保养',
								storeName: '大宝车辆维修店',
								orderTime: '2023-03-12 12:09',
								priceType: '实付',
								price: '230.56',
								status: '已退款'
							},
							{
								orderNo: '242552525222',
								serviceItem: '车辆保养',
								storeName: '大宝车辆维修店',
								orderTime: '2023-03-12 12:09',
								priceType: '实付',
								price: '230.56',
								status: '已完成'
							}
						];
					} else if (status === '待支付') {
						// 待支付（示例数据）
						mockOrders = [{
							orderNo: '242552525223',
							serviceItem: '轮胎更换',
							storeName: '大宝车辆维修店',
							orderTime: '2023-03-13 10:30',
							priceType: '应付',
							price: '500.00',
							status: '待支付'
						}];
					} else if (status === '待使用') {
						// 待使用（示例数据）
						mockOrders = [{
							orderNo: '242552525224',
							serviceItem: '汽车美容',
							storeName: '大宝车辆维修店',
							orderTime: '2023-03-14 09:15',
							priceType: '实付',
							price: '199.00',
							status: '待使用'
						}];
					} else if (status === '待评价') {
						// 待评价（示例数据）
						mockOrders = [{
							orderNo: '242552525222',
							serviceItem: '车辆保养',
							storeName: '大宝车辆维修店',
							orderTime: '2023-03-12 12:09',
							priceType: '实付',
							price: '230.56',
							status: '待评价'
						}];
					}

					if (mockOrders.length < this.pageSize) {
						this.hasMore = false;
					}

					this.orders = this.orders.concat(mockOrders);
					this.pageNum++;
					this.isLoading = false;
				}, 1000);
			},
			// 前往订单详情
			goOrderDetail(order) {
				uni.navigateTo({
					url: `/my/pages/orderDetail/orderDetail?orderNo=${order.orderNo}`
				});
			},
			// 立即评价
			goEvaluate(order) {
				uni.navigateTo({
					url: `/pages/evaluate/evaluate?orderNo=${order.orderNo}`
				});
			},

			// 再来一单
			repeatOrder(order) {
				// 跳转到对应服务项目的下单页面，携带订单相关信息
				uni.navigateTo({
					url: `/pages/serviceDetail/serviceDetail?serviceId=${order.serviceId}&storeId=${order.storeId}`
				});
			},

			// 重新下单
			reorder(order) {
				// 重新下单逻辑，与再来一单类似，可携带原订单信息
				uni.navigateTo({
					url: `/pages/orderConfirm/orderConfirm?orderNo=${order.orderNo}&reorder=1`
				});
			},

			// 取消订单
			cancelOrder(order) {
				uni.showModal({
					title: '提示',
					content: '确定要取消该订单吗？',
					cancelText: '再想想',
					confirmText: '确认取消',
					success: (res) => {
						if (res.confirm) {
							// 调用取消订单接口
							this.isLoading = true;
							// 模拟接口请求
							setTimeout(() => {
								// 实际项目中替换为真实接口调用
								const index = this.orders.findIndex(item => item.orderNo === order
									.orderNo);
								if (index !== -1) {
									this.orders[index].status = '已取消';
									uni.showToast({
										title: '订单已取消',
										icon: 'success'
									});
								}
								this.isLoading = false;
							}, 1000);
						}
					}
				});
			},

			// 申请退款
			applyRefund(order) {
				// 跳转到退款申请页面
				uni.navigateTo({
					url: `/pages/refundApply/refundApply?orderNo=${order.orderNo}`
				});
			},

			// 立即支付
			payOrder(order) {
				// 模拟支付流程
				uni.showLoading({
					title: '跳转支付中...'
				});

				// 实际项目中调用支付接口
				setTimeout(() => {
					uni.hideLoading();
					// 支付成功后更新订单状态
					const index = this.orders.findIndex(item => item.orderNo === order.orderNo);
					if (index !== -1) {
						this.orders[index].status = '待使用';
						uni.showToast({
							title: '支付成功',
							icon: 'success'
						});
					}
				}, 1500);
			},

			// 扫码结算
			scanCheckout(order) {
				// 调用扫码功能
				uni.scanCode({
					onlyFromCamera: false,
					scanType: ['qrCode'],
					success: (res) => {
						// 扫码成功后验证
						if (res.result) {
							// 模拟验证流程
							uni.showLoading({
								title: '验证中...'
							});

							setTimeout(() => {
								uni.hideLoading();
								// 验证成功后更新订单状态
								const index = this.orders.findIndex(item => item.orderNo === order
									.orderNo);
								if (index !== -1) {
									this.orders[index].status = '已完成';
									uni.showToast({
										title: '结算成功',
										icon: 'success'
									});
								}
							}, 1500);
						}
					},
					fail: (err) => {
						console.error('扫码失败', err);
						uni.showToast({
							title: '扫码失败，请重试',
							icon: 'none'
						});
					}
				});
			},
			// 获取状态样式类名
			getStatusClass(status) {
				if (status === '待评价' || status === '已完成') {
					return 'statusBlue';
				} else if (status === '已取消' || status === '已退款') {
					return 'statusGray';
				} else if (status === '待支付' || status === '待使用') {
					return 'statusOther';
				}
				return '';
			},
			// 获取状态的价格样式类名
			getStatusClassPrice(status) {
				if (status === '待支付' || status === '待使用') {
					return 'priceOrange';
				}
				return '';
			}
		},
		// 上拉触底加载更多
		onReachBottom() {
			this.getOrders();
		}
	};
</script>

<style scoped>
	.page {
		padding: 0 10rpx;
		background-color: #F8F8F8;
	}

	.up-view {
		padding: 0 20rpx;
		/* background: linear-gradient(to bottom, #3788FF, #0963E7); */
		color: #fff;
		padding-bottom: 200rpx;
		/* 1. 基础渐变背景（作为底层） */
		background: linear-gradient(to bottom, #3788FF, #0963E7);

		/* 2. 添加背景图（叠加在渐变上） */
		/* background-image: url('/static/icons/组 8.png'); */
		/* 背景图路径 */

		/* 3. 背景图属性设置 */
		background-repeat: no-repeat;
		/* 不重复平铺 */
		background-size: cover;
		/* 覆盖整个容器（可能裁剪） */
		/* 可选：background-size: contain; 完整显示图片（可能留空白） */

		background-position: center center;
		/* 图片居中显示 */
		background-attachment: scroll;
		/* 随内容滚动（默认值） */

		/* 图片层（在渐变上方） */
		background-blend-mode: overlay;
		/* 混合模式（可选） */
	}

	.custom-navbar {
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 88rpx;
		padding: 0 10rpx;
		font-weight: 300;
		box-sizing: border-box;
	}

	.nav-title {
		margin-right: 17rpx;
	}

	.personal-info-page {
		background-color: #f5f5f5;
		height: 100vh;
	}



	.order-list-page {
		height: 100vh;
		padding: 0 20rpx;
		margin-top: -200rpx;
	}

	/* 顶部标签栏（背景蓝色，文字白色） */
	.tab-bar {
		display: flex;

	}

	.tab-item {
		flex: 1;
		text-align: center;
		padding: 10rpx 0;
		margin: 10rpx 40rpx;
		font-size: 31rpx;
		color: #fff;
		/* 文字白色 */
	}

	.tab-item.active {
		font-weight: bold;
		border-bottom: 4rpx solid #fff;
		/* 选中时下划线白色 */
	}

	.order-list {
		margin-top: 10rpx;
	}

	.order-item {
		margin-bottom: 20rpx;
	}

	.cardUp {
		background-color: #fff;
		padding: 20rpx;
		border-radius: 30rpx;
	}

	.order-number {
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-weight: 600;
		margin-bottom: 25rpx;
		padding-bottom: 20rpx;
		border-bottom: 8rpx solid #F8F8F8;
		font-size: 25rpx;

	}

	.service-info,
	.store-info,
	.order-time {
		margin-bottom: 35rpx;
		font-size: 25rpx;
	}

	.store-info {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.store-info>text:nth-child(1) {
		width: 450rpx;
	}

	.store-info image {
		width: 25rpx;
		height: 25rpx;
		margin-left: -300rpx;
	}

	/* 状态文字颜色 */
	.statusBlue {
		width: 100rpx;
		color: #003CFF;
		font-size: 20rpx;
	}

	.statusGray {
		color: #999;
		font-size: 20rpx;
	}

	.statusOther {
		color: #ff7a45;
		font-size: 20rpx;
	}

	.price-operation {
		display: flex;
		justify-content: space-between;
		border-top: 4rpx solid #F8F8F8;
		padding-top: 20rpx;
		align-items: center;
		font-size: 30rpx;
	}

	.price {}

	.priceOrange {
		color: #ff7a45;
	}

	.btn-group {
		display: flex;
		gap: 10rpx;
	}

	.btn {
		padding: 0rpx 30rpx;
		border-radius: 10rpx;
		font-size: 20rpx;
	}

	.evaluate-btn {
		background-color: #BFBFBF;
		color: #fff;
	}

	.repeat-btn,
	.reorder-btn {
		background-color: #1D72F1;
		color: #fff;
	}

	.foot {
		margin-top: 400rpx;
	}

	.loading,
	.no-more {
		text-align: center;
		padding: 20rpx;
		color: #000;
	}
</style>